<template>
  <div class="card" id="salary" style="height: 400px"></div>
</template>
<script setup>
import {  watch } from 'vue'
import { initEcharts } from '../utils/echart'
const props = defineProps({
  salaryData: {
    type: Array,
  }
})

watch(() => props.salaryData, (newValue, oldValue) => {
  initSalaryChart(newValue)
})

// 班级薪资分布
const initSalaryChart = (data) => {
  const myEchart = initEcharts('#salary')
  myEchart.setOption({
    title: {
      text: '班级薪资分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      bottom: '6%',
      left: 'center',
    },
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',
        radius: ['50%', '64%'],
        center: ['50%', '45%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        labelLine: {
          show: false,
        },
        data: data.map((item) => {
          return {
            value: item.g_count + item.b_count,
            name: item.label,
          }
        }),
      },
    ],
  })
}
</script>
